<script setup>
import { ref, watch, defineEmits } from 'vue'

const emit = defineEmits(['add_secretkey'])
const seckey_Id = ref('')
const seckey_SecretKey = ref('')
const seckey_Name = ref('')
const seckey_Starttime = ref(null)
// 提示内容
const info_Id = ref('')
const info_SecretKey = ref('')
const info_Name = ref('')
const info_Starttime = ref('')

const able2add = ref(false)
const secretKeyData = ref({
  customerId: '',
  customerSecKey: '',
  customerName: '',
  startTime: null
})
function verifyId() {
  if (seckey_Id.value.length == 0) {
    info_Id.value = '客户Id不能为空'
  } else {
    info_Id.value = ''
  }
}
function verifySecretKey() {
  if (seckey_SecretKey.value.length == 32) {
    info_SecretKey.value = ''
  } else {
    info_SecretKey.value = '客户的SecretKey的长度必须是32位'
  }
}
function verifyName() {
  if (seckey_Name.value.length == 0) {
    info_Name.value = '客户名称不能为空'
  } else {
    info_Name.value = ''
  }
}
function verifyStarttime() {
  if (seckey_Starttime.value == null || seckey_Starttime.value == '') {
    info_Starttime.value = '请选择时间'
  } else {
    info_Starttime.value = ''
  }
}
function addNewSecretKey() {
  secretKeyData.value = {
    customerId: seckey_Id.value,
    customerSecKey: seckey_SecretKey.value,
    customerName: seckey_Name.value,
    startTime: seckey_Starttime.value
  }
  verifyId()
  verifySecretKey()
  verifyName()
  verifyStarttime()

  if (
    seckey_Id.value.length > 0 &&
    seckey_SecretKey.value.length == 32 &&
    seckey_Name.value.length > 0 &&
    seckey_Starttime.value != null &&
    seckey_Starttime.value != ''
  ) {
    console.log('数据符合要求', secretKeyData.value)
    emit('add_secretkey', secretKeyData.value)
  } else {
    console.log('数据不符合要求')
  }
}
watch(seckey_Id, () => {
  verifyId()
})
watch(seckey_SecretKey, () => {
  verifySecretKey()
})
watch(seckey_Name, () => {
  verifyName()
})
watch(seckey_Starttime, (newVal, oldVal) => {
  console.log(newVal, oldVal)
  verifyStarttime()
})
watch(
  secretKeyData,
  () => {
    if (
      seckey_Id.value.length > 0 &&
      seckey_SecretKey.value.length == 32 &&
      seckey_Name.value.length > 0 &&
      seckey_Starttime.value != null &&
      seckey_Starttime.value != ''
    ) {
      able2add.value = true
    } else {
      able2add.value = false
    }
  },
  { deep: true }
)
</script>

<template>
  <div class="addseckey_container">
    <div class="seckeyrow">
      <span>客户Id</span>
      <input v-model="seckey_Id" type="text" value="" />
      <span class="tishi_info">{{ info_Id }}</span>
    </div>
    <div class="seckeyrow">
      <span>客户的SecretKey</span>
      <input v-model="seckey_SecretKey" type="text" value="" />
      <span class="tishi_info">{{ info_SecretKey }}</span>
    </div>
    <div class="seckeyrow">
      <span>客户名称</span>
      <input v-model="seckey_Name" type="text" value="" />
      <span class="tishi_info">{{ info_Name }}</span>
    </div>
    <div class="seckeyrow">
      <span>开始服务的时间</span>
      <input v-model="seckey_Starttime" type="datetime-local" value="" />
      <span class="tishi_info">{{ info_Starttime }}</span>
    </div>
    <div class="seckeyrow">
      <button @click="addNewSecretKey">添加SecretKey</button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.addseckey_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: red;
  .seckeyrow {
    width: 96%;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      width: 15%;
      font-size: 1.6rem;
      text-align: right;
      margin-right: 2rem;
    }
    input {
      flex: 1;
      font-size: 1.6rem;
    }
    .tishi_info {
      width: 16%;
      font-size: 1.6rem;
      text-align: left;
      margin-left: 2rem;
    }
  }
}
</style>
